<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>CatShop</title>
    <link rel="stylesheet" href="css/normalize.css"/>
    <link rel="stylesheet" href="libs/font-awesome-4.5.0/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="css/app.css"/>
    
</head>
<body>
	<!--头部 -->
	<header class="top-header fixed-head">
		<i class="fa fa-bars"></i>
		<h3>女装，连衣裙</h3>
		<div class="pull-right">
			<i class="fa fa-shopping-cart"><em>1</em></i>
			<i class="fa fa-filter"></i>
		</div>
		<!--分类-->
		<div class="assort">
			<div class="assort-head">
				<h4>连衣裙分类</h4>
				<i class="fa fa-angle-right"></i>
			</div>
			<dl>
				<dd>
					<a href="#">休闲连衣裙</a>
				</dd>
				<dd>
					<a href="#">工作连衣裙</a>
				</dd>
				<dd>
					<a href="#">晚礼服</a>
				</dd>
				<dd>
					<a href="#">大衣</a>
				</dd>
			</dl>
		</div>
		<!--筛选-->
		<div class="filter">
			<div class="filter-head">
				<h4>筛选</h4>
				<i class="fa fa-filter"></i>
			</div>
			<div class="filter-body">
				<form>
					<div class="form-group">
						<select>
							<option>品牌</option>
							<option>肯利亚</option>
							<option>歌宝娜</option>
							<option>卡尼尚</option>
						</select>
						<i class="fa fa-angle-right"></i>
					</div>
					<dl class="color">
						<dt><i class="fa fa-pie-chart"></i>Color</dt>
						<dd style="background-color: #1e1f27;"></dd>
						<dd style="background-color: #a95842;"></dd>
						<dd style="background-color: #e5b378;"></dd>
						<dd style="background-color: #a09b94;"></dd>
						<dd style="background-color: #f1f0ee;"></dd>
						<dd style="background-color: #4b90e6;"></dd>
						<dd style="background-color: #58cbf6;"></dd>
						<dd style="background-color: #78e2ca;"></dd>
						<dd style="background-color: #71cd71;"></dd>
						<dd style="background-color: #e5b378;"></dd>
						<dd style="background-color: #9ccd71;"></dd>
						<dd style="background-color: #ef5e3c;"></dd>
						<dd style="background-color: #e66696;"></dd>
						<dd style="background-color: #9454dc;"></dd>
					</dl>
					<dl class="size">
						<dt><i class="fa fa-maxcdn"></i>Size</dt>
						<dd>xxs</dd>
						<dd>xs</dd>
						<dd>s</dd>
						<dd>m</dd>
						<dd>l</dd>
						<dd>xl</dd>
						<dd>xxl</dd>
						<dd>3xl</dd>
					</dl>
					<div class="form-group">
						<select>
							<option>场合</option>
							<option>婚礼</option>
							<option>外出</option>
							<option>旅游</option>
						</select>
						<i class="fa fa-angle-right"></i>
					</div>
					<input type="submit" value="确定" />
					<input type="button" value="取消" id="quxiao"/>
				</form>
			</div>
		</div>
		<!--购物车快捷-->
		<div class="shop-cart">
			<div class="cart-item">
				<button type="button"><i class="fa fa-trash-o"></i></button>
				<ul>
					<li>
					<span><img src="img/pic1.png"/></span>
					</li>
					<li>
						<h4>史上最美连衣裙</h4>
						<p>尺码：L</p>
						<small>￥39.99</small>
					</li>
					<li>
						<b>1</b>
						<div class="add">
							<i class="fa fa-chevron-up"></i>
							<i class="fa fa-chevron-down"></i>
						</div>
					</li>
				</ul>
			</div>
			<h3>￥396.99</h3>
			<input type="button" value="去结算" />
		</div>
	</header>
	<!--删除弹窗-->
	<!--<div class="popupbox">
		<div class="popup">
			<p>确定删除该商品吗？</p>
			<button type="button" class="true-btn">确定</button>
			<button type="button" class="false-btn">取消</button>
		</div>
	</div>-->
	<!--侧边-->
	<aside class="aside-menu hide-aside">
		<div class="none"></div>
		<div class="menu">
			<header class="side-head">
				<h4>You looking for?</h4>
				<span class="active">man</span>
				<span>woman</span>
			</header>
			<ul>
				<li>
					<div class="item">
						<h5>服装</h5>
						<i class="fa fa-angle-down"></i>
					</div>
					<dl class="item-body">
						<dd>
							<a href="products.html">连衣裙</a>
						</dd>
						<dd>
							<a href="products.html">半身裙</a>
						</dd>
						<dd>
							<a href="products.html">高腰裙</a>
						</dd>
						<dd>
							<a href="products.html">长裙</a>
						</dd>
					</dl>
				</li>	
				<li>
					<div class="item">
						<h5>鞋子</h5>
						<i class="fa fa-angle-down"></i>
					</div>
					<dl class="item-body">
						<dd>
							<a href="products.html">短靴</a>
						</dd>
						<dd>
							<a href="products.html">高筒靴</a>
						</dd>
						<dd>
							<a href="products.html">雪地靴</a>
						</dd>
						<dd>
							<a href="products.html">高跟鞋</a>
						</dd>
					</dl>
				</li>
				<li>
					<div class="item">
						<h5>外套</h5>
						<i class="fa fa-angle-down"></i>
					</div>
					<dl class="item-body">
						<dd>
							<a href="products.html">皮衣</a>
						</dd>
						<dd>
							<a href="products.html">大衣</a>
						</dd>
						<dd>
							<a href="products.html">牛仔</a>
						</dd>
						<dd>
							<a href="products.html">蕾丝</a>
						</dd>
					</dl>
				</li>
				<li>
					<div class="item">
						<h5>首饰</h5>
						<i class="fa fa-angle-down"></i>
					</div>
					<dl class="item-body">
						<dd>
							<a href="products.html">戒指</a>
						</dd>
						<dd>
							<a href="products.html">耳环</a>
						</dd>
						<dd>
							<a href="products.html">项链</a>
						</dd>
						<dd>
							<a href="products.html">手环</a>
						</dd>
					</dl>
				</li>
			</ul>
			<hr />
			<ol>
				<li>
					<a href="index.html">
						<i class="fa fa-home"></i>
						<p>首页</p>
					</a>
				</li>
				<li>
					<a href="#">
						<i class="fa fa-calendar"></i>
						<p>我的订单</p>
					</a>
				</li>
				<li>
					<a href="#">
						<i class="fa fa-cog"></i>
						<p>设置</p>
					</a>
				</li>
			</ol>
		</div>
	</aside>
	<div class="container prodocts">
		<div class="search-box">
			<i class="fa fa-search"></i>
			<input type="search" placeholder="蕾丝裙" />
		</div>
		<div class="filter-btn">
			<span>
				<i class="fa fa-close"></i>
				好评
			</span>
			<span>
				<i class="fa fa-close"></i>
				尺码：M
			</span>
			<span>
				<i class="fa fa-close"></i>
				春季
			</span>
		</div>
		<div class="prodoct">
			<ul>
				<li>
					<a href="details.html">
						<img src="img/pic1.png" />
						<p>连衣裙</p>
						<span>￥60.99</span>
					</a>
				</li>
				<li>
					<a href="details.html">
						<img src="img/pic1.png" />
						<p>连衣裙</p>
						<span>￥60.99</span>
					</a>
				</li>
				<li>
					<a href="details.html">
						<img src="img/pic1.png" />
						<p>连衣裙</p>
						<span>￥60.99</span>
					</a>
				</li>
				<li>
					<a href="details.html">
						<img src="img/pic1.png" />
						<p>连衣裙</p>
						<span>￥60.99</span>
					</a>
				</li>
			</ul>
		</div>
	</div>
	<script src="libs/zepto/zepto.min.js"></script>
    <script src="js/app.js"></script>
</body>
</html>